<template>
  <div class="salary-test-container">
    <!-- 标题区域 -->
    <div class="header">
      <div class="fire-icon">🔥</div>
      <h1>职场级别大测试</h1>
      <p>填个小表格，马上知道你在阿里的职级！</p>
      <span class="subtitle">超准的哦~</span>
    </div>

    <!-- 水平进度条 -->
    <div class="progress-bar-horizontal">
      <span class="progress-label">测试进度</span>
      <span class="progress-percent">{{ progress }}%</span>
    </div>

    <div class="progress-bar-horizontal">
      <div class="progress-track">
        <div class="progress-fill" :style="{ width: progress + '%' }"></div>
      </div>
    </div>

    <!-- 表单区域 -->
    <el-form 
      :model="formData" 
      label-position="top"
      class="salary-form"
    >
      <!-- 总工作年限 -->
      <el-form-item label="⏰ 总工作年限" required>
        
        <el-slider
          v-model="formData.year_of_experience"
          :min="0"
          :max="50"      
          size="large"
          style="width: 90%;"
          @change="updateProgress"
        />
         <span class="slider-value">{{ formData.year_of_experience }}年</span>
      </el-form-item>

      <!-- 当前公司工作年限 -->
      <el-form-item label="🏢 当前公司工作年限" required>
        
         <el-slider
          v-model="formData.year_in_company"
          :min="0"
          :max="50"      
          size="large"
          style="width: 90%;"
          @change="updateProgress"
        />
      <span class="slider-value">{{ formData.year_in_company }}年</span>
      </el-form-item>

      <!-- 最高学历 -->
      <el-form-item label="🎓 最高学历" required>
        <el-select
          v-model="formData.degree"
          placeholder="请选择最高学历"
          size="large"
          class="select-input"
          @change="updateProgress"
        >
          <el-option label="专科" value="专科" />
          <el-option label="本科" value="本科" />
          <el-option label="硕士" value="硕士" />
          <el-option label="博士" value="博士" />
        </el-select>
        <div v-if="formData.degree" class="check-icon">✅</div>
      </el-form-item>

      <!-- 本科学校 -->
      <el-form-item label="🏫 本科学校" required>
        <el-select
          v-model="formData.bachelor_school"
          placeholder="请选择本科学校"
          size="large"
          class="select-input"
          @change="updateProgress"
          filterable
          default-first-option
        >
          <el-option 
            v-for="school in allSchools" 
            :key="school" 
            :label="school" 
            :value="school" 
          />
        </el-select>
        <div v-if="formData.bachelor_school" class="check-icon">✅</div>
      </el-form-item>

      <!-- 研究生学校 -->
      <!-- <el-form-item label="🏫 研究生学校（如有）">
        <el-select
          v-model="formData.advanced_school"
          placeholder="请选择研究生学校（可选）"
          size="large"
          class="select-input"
          @change="updateProgress"
          clearable
          filterable
          default-first-option
        >
          <el-option 
            v-for="school in allSchools" 
            :key="school" 
            :label="school" 
            :value="school" 
          />
        </el-select>
      </el-form-item> -->

      <!-- 职位类型 -->
      <el-form-item label="💼 职位类型" required>
        <el-select
          v-model="formData.job_type"
          placeholder="请选择从事的职位类型"
          size="large"
          class="select-input"
          @change="updateProgress"
        >
          <el-option label="开发" value="开发" />
          <el-option label="产品经理" value="产品经理" />
          <el-option label="设计" value="设计" />
          <el-option label="主管" value="主管" />
        </el-select>
        <div v-if="formData.job_type" class="check-icon">✅</div>
      </el-form-item>

      <!-- 工作城市 -->
      <el-form-item label="🏙️ 工作城市" required>
        <el-select
          v-model="formData.location"
          placeholder="在哪个城市搬砖？"
          size="large"
          class="select-input"
          @change="updateProgress"
        >
         <el-option 
            v-for="city in cities" 
            :key="city" 
            :label="city" 
            :value="city" 
          />
        </el-select>
        <div v-if="formData.location" class="check-icon">✅</div>
      </el-form-item>

      <!-- 月薪 -->
      <el-form-item label="💰 年薪（万元）" required>
    
         <el-slider
          v-model="formData.annual_salary"
          :min="3"
          :max="120"      
          size="large"
          style="width: 80%;"
          @change="updateProgress"
        />
        <span class="slider-value">{{ formData.annual_salary}}万元</span>
      </el-form-item>

      <!-- 年度奖金 -->
      <!-- <el-form-item label="🎁 年度奖金（元，可选）">
        <el-input-number
          v-model="formData.annual_bonus"
          :min="0"
          :step="1000"
          placeholder="请输入年度奖金（可选）"
          size="large"
          class="select-input"
          @change="updateProgress"
          clearable
        />
      </el-form-item> -->
    </el-form>

    <!-- 提交按钮 -->
    <div class="submit-btn-wrapper">
      <el-button
        type="primary"
        size="large"
        class="submit-btn"
        @click="handleTestSalary"
        :disabled="!isFormValid"
      >
        🚀 立即测职级！免费的~
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { PredictApi } from '@/utils/api';
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
// import regionData from '@/assets/region-data.json'
import schoolsData from '@/assets/schools.json'



const router = useRouter()

// 表单数据
const formData = ref({
  year_of_experience: 5,
  year_in_company: 3,
  degree: '本科',
  bachelor_school: '清华大学',
  advanced_school: '',
  job_type: '开发',
  location: '北京',
  annual_salary: 10,
  annual_bonus: null
});

// 定义城市列表
const cities = ['北京', '上海', '广州', '深圳', '成都', '杭州', '重庆', '苏州', '武汉', '西安', '南京', '长沙', '天津', '郑州', '东莞', '佛山', '宁波', '青岛', '合肥', '其他']



// 合并学校列表并去重
const allSchools = schoolsData

// 进度计算
const progress = computed(() => {
  const requiredFields = [
    formData.value.year_of_experience,
    formData.value.year_in_company,
    formData.value.degree,
    formData.value.bachelor_school,
    formData.value.job_type,
    formData.value.location,
    formData.value.annual_salary
  ];
  
  const completed = requiredFields.filter(Boolean).length;
  return Math.round((completed / requiredFields.length) * 100);
});

// 表单是否有效
const isFormValid = computed(() => {
  return (
    formData.value.year_of_experience !== null &&
    formData.value.year_in_company !== null &&
    formData.value.degree &&
    formData.value.bachelor_school &&
    formData.value.job_type &&
    formData.value.location &&
    formData.value.annual_salary !== null
  );
});

// 更新进度
const updateProgress = () => {
  // 可扩展动画或状态更新
};

// 提交处理
const handleTestSalary = async () => {
  if (!isFormValid.value) {
    console.log('请填写所有必填项');
    return;
  }

  // 处理可选字段
  const requestData = { ...formData.value };

  // 将年薪从万元转换为元
  requestData.annual_salary = requestData.annual_salary * 10000;

  if (requestData.annual_bonus === null) {
    requestData.annual_bonus = 0;
  }
  if (!requestData.advanced_school) {
    delete requestData.advanced_school;
  }

  try {
    console.log('提交预测数据:', requestData);
    const response = await PredictApi.predictLevel(requestData);
    console.log('预测结果:', response);
     // 将结果数据保存到localStorage
        const resultData = {
          ...response.data,
          form_data: requestData
        };
        localStorage.setItem('predictResult', JSON.stringify(resultData));


    // 先跳转到分析页面
    router.push('/analysis-loading');

    // 稍后跳转到结果页（模拟延迟）
    setTimeout(() => {
      router.push({
        path: '/predict-result',
       
      });
    }, 6000); // 3秒后跳转
  } catch (error) {
    console.error('预测失败:', error);
    if (error.response && error.response.data && error.response.data.errors) {
      const errorMsg = error.response.data.errors.map(err => err.message).join(', ');
      ElMessage({
        message: errorMsg,
        type: 'error',
        duration: 5000,
        showClose: true
      });
    } else {
      ElMessage({
        message: '预测失败，请稍后重试',
        type: 'error',
        duration: 5000,
        showClose: true
      });
    }
  }
};


</script>

<style scoped>
.salary-test-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* background-color: #f9f9ff; */
  padding: 20px;
  font-family: 'Microsoft YaHei', sans-serif;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.fire-icon {
  font-size: 24px;
  color: #e63a8c;
  margin-right: 8px;
}

.header h1 {
  color: #e63a8c;
  font-size: 28px;
  font-weight: bold;
  margin: 0;
}

.header p {
  color: #555;
  font-size: 16px;
  margin: 8px 0;
}

.subtitle {
  color: #9c27b0;
  font-size: 24px;
  font-weight: 800;
  margin: 8px 0;
}

/* 水平进度条 */
.progress-bar-horizontal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 500px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
}

.progress-label {
  font-size: 14px;
  color: #666;
}

.progress-track {
  flex: 1;
  height: 8px;
  background-color: #eee;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #9c27b0, #e63a8c);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.el-slider{
  --el-slider-main-bg-color: #ff40a1;
}

.progress-percent {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.salary-form {
  width: 100%;
  max-width: 500px;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.salary-form .el-form-item {
  margin-bottom: 24px;
}

.salary-form .el-form-item__label {
  font-weight: 500;
  color: #606266;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.select-input {
  width: 100%;
  border: 2px solid #e63a8c;
  border-radius: 8px;
  background-color: #f0f8ff;
  font-size: 16px;
}

.select-input:focus {
  outline: none;
  border-color: #9c27b0;
}

.check-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #4caf50;
  font-size: 18px;
  pointer-events: none;
}

.submit-btn-wrapper {
  margin-top: 30px;
  width: 100%;
  max-width: 500px;
  text-align: center;
}

.submit-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #e63a8c, #9c27b0);
  color: white;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(230, 58, 139, 0.4);
}

.submit-btn:hover {
  transform: translateY(-2px);
}

.submit-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.slider-value {
  margin-left: 5px;
  font-weight: bold;
  font-size: 16px;
  color: #e63a8c;
  white-space: nowrap;
}
</style>